<template>
  <div class="box">
    <div class="login">
      <van-nav-bar
        title="登录"
        left-text="返回"
        right-text="去注册"
        left-arrow
        @click-left="$router.go(-1)"
        @click-right="$router.push('/regist')"
      />
      <van-form @submit="login">
        <van-field
          class="input"
          v-model="userPhone"
          placeholder="请输入手机号"
          :rules="[
            {
              required: true,
              pattern: /^1[3-9]\d{9}$/,
              message: '请填写长度为11位手机号',
            },
          ]"
        />
        <van-field
          class="input"
          v-model="userPass"
          type="password"
          placeholder="请输入密码"
          :rules="[
            {
              required: true,
              pattern: /^\d{4}$/,
              message: '请输入密码，长度为4位的数字',
            },
          ]"
        />
        <div style="margin: 0.4267rem">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
  <!-- 使用vant-ui的form表单组件，首先要导入、注册button组件，否侧form表单组件的样式无法生效，报错<van-button>未注册 -->
</template>

<script>
import { Toast } from "vant";
import { user_login } from "@/utils/api";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      userPhone: "",
      userPass: "",
      // rules:{
      //     userPhone:{
      //         rule:/^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
      //         msg:"请输入合法手机号",
      //     },
      //     userPass:{
      //         rule:/^\w{4}$/,
      //         msg:"密码请输入4位数字"
      //     }
      // }
    };
  },
  methods: {
    login() {
      // if( !this.validation('userPhone')) return;
      // if( !this.validation('userPass')) return;
      user_login({ phone: this.userPhone, pass: this.userPass }).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          Toast.success(res.data.msg);
          localStorage.setItem("token", res.data.token);
          localStorage.setItem("userinfo", JSON.stringify(res.data.userinfo));
          // 给vuex存储用户信息
          // this.$store.commit('userinfo',res.data.userinfo )
          // 调用vuex actiions中的方法触发收藏请求
          this.$store.dispatch("request_favlist");
          // 调用vuex actiions中的方法触发购物车请求
          this.$store.dispatch("request_favlist");
          // 登录成功跳转首页
          this.$router.push("/");
        } else {
          Toast.fail(res.data.msg);
        }
      });
    },
    // validation(key) {
    //   let bool = true;
    //   if (!this.rules[key].rule.test(this[key])) {
    //     // 提示信息
    //     Toast(this.rules[key].msg);
    //     bool = false;
    //     return false;
    //   }
    //   return bool;
    // },
  },
};
</script>

<style lang="scss" scoped>
.box {
  background-image: url(../../public/33.png);
  background-repeat: round;
  height: 667px;
}
.login {
  .input {
    width: 92%;
    margin: 0.8rem auto;
    border: 0.0267rem solid #ccc;
    border-radius: 0.6133rem;
    text-align: center;
  }
}
::v-deep .van-field__control {
  text-align: center;
}
::v-deep .van-button {
  height: 1.2267rem;
}
::v-deep.van-nav-bar {
  line-height: 0.64rem;
}
::v-deep .van-nav-bar__content {
  height: 1.28rem;
}
::v-deep .van-nav-bar__arrow {
  font-size: 0.4267rem;
}
::v-deep .van-nav-bar__text {
  font-size: 0.3733rem;
}
::v-deep .van-nav-bar__title {
  font-size: 0.4267rem;
}
</style>